<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>退房</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			.nowAddress{
				border-bottom: 1px solid #F0F0F0;
				padding:.8rem;
			}
			.nowAddress .left,.nowAddress .right{
				float: left;
				width: 30%;
			}
			.nowAddress .right{
				width: 65%;
			}
			.nowAddress p{
				font-size: 1rem;
			}
			.nowAddress .left p{
				color: #000000;
				font-weight: bold;
			}
			.chooseUl{
				padding: 0 .5rem;
			}
			.chooseUl li {
				border-bottom: 1px solid #F0F0F0;
				padding: 1rem .5rem;
				font-size: 1rem;
			}
			.chooseUl li span{
				display: inline-block;
				vertical-align: middle;
			}
			.chooseUl li span:nth-child(1){
				width: 35%;
				overflow: hidden;
			}
			.chooseUl li span:nth-child(2){
				margin-left: 4%;
				overflow: hidden;
			}
			.chooseUl li .checkBox{
				font-size: .8rem;
				display: inline-block;
				width: 1.3rem;
				height: 1.3rem;
				border: none;
				border: 1px solid #999;
				border-radius: 3px;
				float: right;
				background-color: #fff;
				background-image: url(../images/checkbox.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
			}
			.chooseUl li .checkBox_active{
				background-color: #2B8DF7;
				border: 1px solid #2B8DF7;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">退房</h1>
		</header>
		<div class="mui-content">
			<div class="nowAddress mui-clearfix">
				<div class="left">
					<p style="line-height: 1.5rem;">现住房屋</p>
				</div>
				<div class="right">
					<p id="houseName"></p>
				</div>
			</div>
			<div class="nowAddress mui-clearfix" style="border: none;">
				<div class="left">
					<p style="line-height: 1.5rem;">租客姓名</p>
				</div>
				<div class="right">
					<p style="color: #2B8DF7;">选择需要退房的租客</p>
				</div>
			</div>
			<ul class="chooseUl" id="chooseUl">
			
			</ul>
			<div class="btn-box">
				<button type="button" class="mui-btn mui-btn-primary houseChangeBtn" id="vacationBtn">退房</button>
			</div>
		</div>
		<script src="../js/jquery.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/md5.js"></script>
		<script>
			
			var houseId = getUrlMobile('houseId');
			var houseName =  getUrlMobile('houseName');
			document.getElementById("houseName").innerText = houseName;
			function initPage_person(houseId,keyword){
			var houseId = houseId ;
			var keyword = keyword;
			var mobile = localStorage.getItem('mobile');//本地取到电话号码
			var timestamp = formatDateTime();//年月日时分秒
			var key = 'udacs!@#';//固定的key值
			var token = mobile + timestamp + key;//token的拼接
			var md5 = hex_md5(token);//token的ma5加密
			$.ajax(httpUrl+'get_user_list',{
				data:JSON.stringify({
					"auth":{
						"mobile":mobile,
						"token":md5,
						"imei":"imei",
						"imsi":"imsi",
						"timestamp" :timestamp
					},
			   		"api_ver":"1",
					"req":{
						"mobile":mobile,
						"q_word": keyword,
						"page":"1"
					}
				}),
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				contentType: "text/plain; charset=utf-8",					
				success:function(data){
					if(data.resp){
						var resp =JSON.stringify(data.resp)
						var res = JSON.parse(resp);
						var personUl = document.getElementById('chooseUl')
						personUl.innerHTML ='';
						mui.each(res, function(ind,item) {
							personUl.insertAdjacentHTML('beforeEnd','<li class="mui-clearfix" data-userMobile="'+item.user_mobile+'" ><span>'+item.user_name+'</span><span>'+item.house_end_time+'</span><span class="checkBox"></span></li>')
						});
					}else{
						mui.toast('暂无数据！',{duration:'short',type:'div'});
					}
				},
				error:function(xhr,type,errorThrown){
					mui.toast('网络异常或者服务器出错：'+type,{duration:'short',type:''});
				}
				
			})
		}	
		initPage_person(houseId,'');//默认空值
		
		mui('#chooseUl').on('tap','li',function(){
			$(this).find('.checkBox').toggleClass('checkBox_active');
		})
		
		document.getElementById("vacationBtn").addEventListener('tap',function(){
			var user = [];
			var checkBox = $('.checkBox');
			for(var i = 0;i<checkBox.length;i++){
				if(checkBox[i].classList.contains('checkBox_active')==true){
					var userMobile = {"user_mobile":document.getElementById("chooseUl").getElementsByTagName('li')[i].getAttribute('data-userMobile')}
					user.push(userMobile);
				}
			}	    
			
		function check_out(houseId){
			var houseId = houseId;
			var mobile = localStorage.getItem('mobile');//本地取到电话号码
			var timestamp = formatDateTime();//年月日时分秒
			var key = 'udacs!@#';//固定的key值
			var token = mobile + timestamp + key;//token的拼接
			var md5 = hex_md5(token);//token的ma5加密
			$.ajax(httpUrl+'get_user_list',{
				data:JSON.stringify({
					"auth":{
						"mobile":mobile,
						"token":md5,
						"imei":"imei",
						"imsi":"imsi",
						"timestamp" :timestamp
					},
			   		"api_ver":"1",
					"req":{
						"mobile":mobile,
						"users":user,
						"house_id": houseId
					}
				}),
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				contentType: "text/plain; charset=utf-8",					
				success:function(data){
					mui.toast(data.rsmsg.rsdesc,{duration:'short',type:''});
					if(data.rsmsg.rscode=='0'){
						setTimeout(function () {
	    		 	    		window.android.finish();
						}, 1500)
					}
				},
				error:function(xhr,type,errorThrown){
					mui.toast('网络异常或者服务器出错：'+type,{duration:'2000',type:'div'});
				}
				
			})
		}	
	
		check_out(houseId);
		
	})
		</script>
	</body>
</html>
